<template>
    <div>
        <HeaderNav />
        <div style="max-width:1200px;margin:auto;">
            <!--路径-->
            <div class="box">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>订单结算页面</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div>
                <!--收件人地址-->
                <div>
                    <!--
                        地址列表显示的方式
                        1、原型图一样。弹出地址列表，可以选择
                        2、表格
                        3、卡片---现在代码中采用的方式
                    -->
                    <div style=" text-align:right;">
                        <el-button size="mini" @click="dialogEditAddress">添加收件人</el-button>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="(item, index) in address.addressData" :key="index"
                            style="text-align:left;margin-bottom: 30px;">
                            <el-card :class="{ activ: address.selectedAddressCard == item.id }"
                                @click.native="eventCardSelected(item)">
                                <div>收件人姓名：{{ item.name }}</div>
                                <div>收件人电话：{{ item.phone }}</div>
                                <div>收件人地址：{{ item.address }}</div>
                            </el-card>
                            <div style="font-size:8px;text-align: right;">
                                <span>修改</span> | <span>删除</span>
                            </div>

                        </el-col>
                    </el-row>

                </div>

                <!--选中的商品列表-->
                <div style="margin-top:50px;">
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">

                        <el-table-column label="店铺名称" width="120">
                            <template slot-scope="scope">{{ scope.row.storeName }}</template>
                        </el-table-column>
                        <el-table-column label="图片" width="120">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column label="商品名称">
                            <template slot-scope="scope">
                                {{ scope.row.productName }}
                                <span v-if="scope.row.stockError == true"
                                    style="color:red;font-size:24px;font-weight:600;">库存不足</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="productPrice" label="商品价格" width="120">
                            <template slot-scope="scope">
                                <span style="color:red;font-weight:600;">{{ (scope.row.productPrice).toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="productNumber" label="购买数量" width="180">

                        </el-table-column>
                        <el-table-column prop="name" label="小计" width="120">
                            <template slot-scope="scope">
                                <span style="color:red;font-weight:600;">{{ (scope.row.productNumber *
                                    scope.row.productPrice).toFixed(2)
                                }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!--金额-->
                <div style="margin-top:50px;text-align: right;">
                    <div>商品件数：{{ numbers }}</div>
                    <div>商品总金额：<span style="color:red;font-size:20px;">￥{{ total.toFixed(2) }}</span></div>
                    <div>应付金额：<span style="color:red;font-size:20px;">￥{{ (total > 100 ? total : total + 8).toFixed(2)
                    }}</span>
                    </div>
                    <div><el-button type="danger" @click="eventSubmitOrder">提交订单</el-button></div>
                </div>
            </div>
        </div>

        <!--dialog-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="text-align:left;">
            <el-form :model="address.addressForm">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="address.addressForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="address.addressForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="城市" :label-width="formLabelWidth">
                    <el-cascader v-model="address.addressForm.city" :options="address.options"
                        @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="address.addressForm.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否默认" :label-width="formLabelWidth">
                    <el-checkbox v-model="checked">是默认地址</el-checkbox>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="eventSubmitAddress">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

  
<script>
import HeaderNav from '@/components/HeaderNav.vue'
export default {
    components: {
        //将这个组件在页面中，当作标签来使用即可
        HeaderNav
    },
    computed: {
        //计算商品的总件数
        numbers() {
            let sum = 0
            this.tableData.forEach(x => {
                sum += x.productNumber
            })
            return sum
        },
        //计算商品的总金额
        total() {
            let sum = 0
            this.tableData.forEach(x => {
                sum += x.productNumber * x.productPrice
            })
            return sum
        },
    },
    data() {
        return {
            checked: true,
            dialogFormVisible: false,

            formLabelWidth: '120px',
            tableData: [],

            //所有和地址相关的属性，我都定义到address这个属性中
            address: {
                //所有的地址列表
                addressData: [
                    { id: '1', name: '梁才根', phone: '18012345678', address: '上海某区某街道95号', isDefault: true },
                    { id: '2', name: '赵女士', phone: '18012345679', address: '上海某区某街道95号', isDefault: false },
                    { id: '3', name: '梁先生', phone: '18012345670', address: '上海某区某街道95号', isDefault: false }
                ],
                //编辑地址表单对象
                addressForm: {
                    name: '',
                    city: '',
                    phone: '',
                    address: '',
                    isDefault: false,
                },
                selectedAddressCard: 1,
                options: [{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        children: [{
                            value: 'layout',
                            label: 'Layout 布局'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }]
            },
            memberId: '',
            //用来保留地址卡片单的时候，存放收件人信息，用于提交订单
            selectedAddressInfo: {
                recivedName: '',
                recivedPhone: '',
                recivedAddress: '',
            }
        }
    },
    mounted() {
        let data = this.$route.params.data
        if (data == undefined) {
            this.$router.push('/product/car')
        }
        this.tableData = data

        this.onLoadAddress()
    },
    methods: {
        //提交订单按钮事件
        eventSubmitOrder() {
            //console.log(this.selectedAddressInfo)

            let orderAccount = this.total < 100 ? this.total +8:this.total
            let url = this.$baseUrl + '/order'
            let data = {
                "memberID": this.memberId,
                "orderAccount": orderAccount,
                "recivedName": this.selectedAddressInfo.recivedName,
                "recivedPhone": this.selectedAddressInfo.recivedPhone,
                "recivedAddress": this.selectedAddressInfo.recivedAddress,
                "details": []
            }

            //tableData是购物车列表传过来的数据，所以提交订单的商品明细都在这里面
            this.tableData.forEach(x=>{
                data.details.push({
                        "productId": x.productId,
                        "productName": x.productName,
                        "productPrice": x.productPrice,
                        "producuNumber": x.productNumber
                    })
            })

            this.$http.post(url, data).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    //跳转到待支付页面
                    this.$router.push({path:'/product/pay',query:{
                        orderNo:res.data.data,account:orderAccount
                    }})
                }
            })
        },
        //加载城市列表数据
        onLoadCityData() {
            let url = this.$baseUrl + '/member/city'
            this.$http.get(url).then(res => {
                if (res.data.code == 200) {
                    this.address.options = res.data.data
                }
            })
        },
        //级联选择器的事件
        handleChange(value) {
            console.log(value);
        },
        //加载收件人地址列表
        onLoadAddress() {
            let memberInfo = localStorage.getItem('2010a_login_info')
            if (memberInfo == null) {
                //要去跳转到重新登录
                this.$router.push('/member/login')
            }
            this.memberId = JSON.parse(memberInfo).id

            let url = this.$baseUrl + '/member/address'
            this.$http.get(url, {
                params: {
                    memberId: this.memberId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.address.addressData = res.data.data

                    this.address.addressData.forEach(x => {
                        if (x.isDefaultAddress) {
                            this.address.selectedAddressCard = x.id
                            this.selectedAddressInfo.recivedAddress = x.address
                            this.selectedAddressInfo.recivedName = x.name
                            this.selectedAddressInfo.recivedPhone = x.phone
                        }
                    })
                }
            })
        },
        //收件人地址列表中的卡片单击事件
        eventCardSelected(row) {
            //选中的样式，是根据选中的ID来判断，所以在单击的时候，把这个判断条件改为对应的ID
            this.address.selectedAddressCard = row.id
            this.selectedAddressInfo.recivedAddress = row.address
            this.selectedAddressInfo.recivedName = row.name
            this.selectedAddressInfo.recivedPhone = row.phone
        },
        //提交收件人地址
        eventSubmitAddress() {
            //提交之前，需要获取表单数据
            // console.log(this.address.addressForm)

            //this.address.addressData.push(this.address.addressForm)

            let url = this.$baseUrl + '/member/address'
            let data = {
                "memberId": this.memberId,
                "name": this.address.addressForm.name,
                "address": this.address.addressForm.address,
                "phone": this.address.addressForm.phone,
                "city": this.address.addressForm.city,
                "isDefaultAddress": this.checked
            }
            this.$http.post(url, data).then(res => {
                if (res.data.code == 200) {
                    //提交成功后，隐藏或关闭弹框
                    this.dialogFormVisible = false
                    //提交成功后，重新加载数据
                    this.onLoadAddress()
                }
            })

        },
        //弹出编辑收件人地址框
        dialogEditAddress() {
            this.onLoadCityData()
            this.dialogFormVisible = true

        }
    }
}
</script>

<style scoped>
.box-card {
    cursor: pointer;
}

.activ {
    background-color: #dcdcdc;
}
</style>